<template>
  <div class="map-container">
    <div id="mapStyle" class="container"></div>
    <div class="map-menu">
      <!-- <div class="item active" data-type="0" @click="handlePoint">显示全部</div> -->
      <div
        class="item"
        :class="{ active: type === '1' }"
        data-type="1"
        @click="handlePoint"
      >
        养老机构
      </div>
      <div
        class="item"
        :class="{ active: type === '2' }"
        data-type="2"
        @click="handlePoint"
      >
        服务机构
      </div>
      <div
        class="item"
        :class="{ active: type === '3' }"
        data-type="3"
        @click="handlePoint"
      >
        服务老人
      </div>
      <div
        class="item"
        :class="{ active: type === '4' }"
        data-type="4"
        @click="handlePoint"
      >
        残疾老人
      </div>
    </div>
  </div>
</template>
<style type="text/css">
  .BMap_bubble_center,.BMap_bubble_content{
    overflow-y: scroll !important;
  }
  .BMap_bubble_content::-webkit-scrollbar{
      width: 18px;
  }
</style>
<script>
  import mapData from "@/utils/data";
  import { getList, getCanjielderMap } from "@/api/orderHome";
  import { doorServeList } from "@/api/oldermanager";
  import dictData from "@/utils/dictionary";
  export default {
    name: "Map",
    components: {},
    data() {
      return {
        type: "1",
        imgThumb: require("@/assets/images/img.jpg"),
        icon: require("@/assets/images/map-1.png"),
        icon1: require("@/assets/images/map-4.png"),
        marker: [],
        location: {
          lng: "",
          lat: "",
        },
        map: null,
        olderData: [],
        dictDatas: {},
        homeData: [],
      };
    },
    created() {},
    mounted() {
      this.$nextTick(() => {
        this.init();
      });
      this.dictDatas = dictData;
    },
    methods: {
      getTableData(data) {
        getList("get", data).then((resp) => {
          if (resp.code === 200) {
            let data = resp.data.list;
            data.map((item, index) => {
              this.$set(data[index], 'profile', item.photo);
            })
            this.homeData = data;
            this.getBoundary("河南省开封市", data, 0);
          }
        });
      },
      getdoorServeData() {
        let params = {
          page_size: 10000,
        };
        doorServeList("get", params).then((resp) => {
          if (resp.code === 200) {
            this.olderData = resp.data.list;
            this.getBoundary("开封市尉氏县", this.olderData, 1);
          }
        });
      },
      getCanjielderMap() {
        let params = {
          // page_size: 10000,
        };
        getCanjielderMap("get", params).then((resp) => {
          if (resp.code === 200) {
            this.olderData = resp.data.list;
            this.getBoundary("开封市尉氏县", this.olderData, 1);
          }
        });
      },
      init() {
        this.map = new BMapGL.Map("mapStyle");
        this.map.centerAndZoom(new BMapGL.Point(114.07, 32.13), 9);
        // this.map.centerAndZoom(new BMapGL.Point(114.35, 34.79), 8);
        this.map.addControl(new BMapGL.NavigationControl3D());
        // map.setMapType(BMapGL_PERSPECTIVE_MAP);
        // 地图缩放控件
        this.map.setMapStyleV2({
          styleId: "0e5948460769123a23b5c7615b59ae9d",
        });
        // this.getBoundary("河南省", [], 0);
        let params = {
          pid: 1,
          page_size: 10000,
        };
        this.getTableData(params);
      },
      getBoundary(params, data, infoType) {
        let _this = this;
        var bdary = new BMapGL.Boundary();
        var name = params; // '河南省';
        bdary.get(name, function (rs) {
          //获取行政区域
          _this.map.clearOverlays();
          var count = rs.boundaries.length; //行政区域的点有多少个
          var pointArray = [];
          for (var i = 0; i < count; i++) {
            var ply = new BMapGL.Polygon(rs.boundaries[i], {
              strokeWeight: 2, //设置多边形边线线粗
              strokeOpacity: 1, //设置多边形边线透明度0-1
              StrokeStyle: "solid", //设置多边形边线样式为实线或虚线，取值 solid 或 dashed
              strokeColor: "#2cc1bb", //设置多边形边线颜色
              fillColor: "#2cc1bb", //设置多边形填充颜色
              fillOpacity: 0.1, //设置多边形填充颜色透明度0-1 注：标红的地放你们可以去掉看一下效果，自己体验一下
            }); //建立多边形覆盖物
            _this.map.addOverlay(ply); //添加覆盖物
            pointArray = pointArray.concat(ply.getPath());
          }
          // _this.map.setViewport(ply.getPath()); //调整视野
          _this.map.enableScrollWheelZoom(true);
          _this.map.setViewport(pointArray);
          setTimeout(() => {
            // _this.map.setHeading(64.5); // 设置地图旋转角度
            // _this.map.setTilt(73); // 设置地图的倾斜角度
            if (infoType === 1) _this.map.setZoom(12);
            else _this.map.setZoom(10);
          }, 300);
          _this.addMapOverlay(data, _this.icon, infoType); //向地图添加覆盖物
        });
      },
      addMapOverlay(markers, icon, infoType) {
        var pointarr = new Array();
        if (markers.length === 0) return false;
        for (var index = 0; index < markers.length; index++) {
          if (markers[index].lng && markers[index].lat) {

            if(pointarr.indexOf(index)>-1){
              continue;
            }
            var point = new BMapGL.Point(
              markers[index].lng,
              markers[index].lat
            );

            var title = markers[index]["name"];
            var myIcon = null;
            var marker = null;
            if(title.indexOf("医院") != -1) {
              myIcon = new BMapGL.Icon(this.icon1, new BMapGL.Size(32, 32));
              marker = new BMapGL.Marker(point, { icon: myIcon }); // 创建标注
            } else {
              myIcon = new BMapGL.Icon(icon, new BMapGL.Size(32, 34));
              marker = new BMapGL.Marker(point, { icon: myIcon }); // 创建标注
            }
            var content = markers[index]["address"];
            var mobile = markers[index]["mobile"];
            var sex = markers[index]["sex"];
            var age = markers[index]["age"];
            var type = markers[index]["type"];
            var id_card = markers[index]["id_card"];
            var profile = markers[index]["profile"];
            var person = markers[index]["person"];
            var bed_num = markers[index]["bed_num"];
            var medical = markers[index]["medical"];
            var build_time = markers[index]["build_time"];
            var cart = markers[index]["cart"];
            if(this.type == '4') {
              var id_card = markers[index]["card"];
            }
            var paramArr = [];
            let params = {
              title: title,
              mobile: mobile,
              sex: sex,
              age: age,
              type: type,
              id_card: id_card,
              content: content,
              profile: profile,
              person: person,
              bed_num: bed_num,
              medical: medical,
              build_time: build_time,
              cart: cart,
            };
            paramArr.push(params);

            //找到相同位置定位的
            var label = markers[index]["name"]+"、";
            for(var j=index+1;j<markers.length;j++){
                if(markers[j].lng == markers[index].lng && markers[j].lat == markers[index].lat){
                    pointarr.push(j);
                    var id_card = markers[j]["id_card"];
                    if(this.type == '4') {
                      var id_card = markers[j]["card"];
                    }
                    let params = {
                        content:markers[j]["address"],
                        title:markers[j]["name"],
                        mobile:markers[j]["mobile"],
                        sex:markers[j]["sex"],
                        age:markers[j]["age"],
                        type:markers[j]["type"],
                        id_card:id_card,
                        profile:markers[j]["profile"],
                        person:markers[j]["person"],
                        bed_num:markers[j]["bed_num"],
                        medical:markers[j]["medical"],
                        build_time:markers[j]["build_time"],
                        cart:markers[j]["cart"]
                    };
                    paramArr.push(params);
                    label = label+markers[j]["name"]+"、";
                }
            }
            label = label.substring(0, label.lastIndexOf('、'));
            this.map.addOverlay(marker); // 将标注添加到地图中
            this.clickHandler(marker, paramArr, infoType);

            var label = new BMapGL.Label(label, {
              offset: new BMapGL.Size(20, -10),
            });
            label.setStyle({
              display: "none",
              color: "#333", //字体颜色
              fontSize: "12px", //字体大小
              padding: "5px",
              borderColor: "#dbdbdb",
              fontWeight: "bold", //字体加粗
            });
            this.mouseoverHandler(marker, label);
            marker.setLabel(label);
          }
        }
      },
      mouseoverHandler(marker, label) {
        marker.addEventListener("mouseover", function (e) {
          label.setStyle({ display: "block" });
        });
        marker.addEventListener("mouseout", function (e) {
          label.setStyle({ display: "none" });
        });
      },
      clickHandler(marker, params, infoType) {
        let _this = this;
        marker.addEventListener("click", function (e) {
          _this.openInfo(params, e, infoType);
        });
      },
      openInfo(params, e, infoType) {
        if (infoType == 0) this.InfoWindow(params, e);
        else this.elderInfoWindow(params, e);
      },
      InfoWindow(params, e) {
        let _this = this;
        var p = e.target;
        var opts = {
          width: 400, // 信息窗口宽度
          height: 460,
          title: params[0].title, // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
          enableCloseOnClick: false,
        };
        let sContent = "";
        for(let i=0;i<params.length;i++){
          let avatar = params[i].profile ? params[i].profile : require("@/assets/images/avatar.jpg");
          let medical = params.medical == 0 ? "不支持" : "支持";
          let cart = "";
          let type = "";
          for (let j = 0; j < this.dictDatas.mechanismCart.length; j++) {
            let element = this.dictDatas.mechanismCart[j];
            if (params[i].cart == element.id) {
              cart = element.value;
            }
          }
          for (let t = 0; t < this.dictDatas.mechanismType.length; t++) {
            let element = this.dictDatas.mechanismType[t];
            if (params[i].cart == element.id) {
              type = element.value;
            }
          }
          sContent =
            '<div class="el-card is-hover-shadow colorType0">' +
            '<div class="el-card__body">' +
            '<div style="width: 100%;">' +
            '<div class="mapThumb vCenter">' +
            '<img id="imgDom" src="' +
            avatar +
            '" alt="" />' +
            "</div>" +
            '<div class="mapLine"></div>' +
            '<div class="mapText">' +
            "<p>机构法人：" +
            params[i].person +
            "</p>" +
            "<p>联系方式：" +
            params[i].mobile +
            "</p>" +
            "<p>机构性质：" +
            cart +
            "</p>" +
            "<p>机构类型：" +
            type +
            "</p>" +
            "<p>医保资格：" +
            medical +
            "</p>" +
            "<p>成立时间：" +
            params[i].build_time +
            "</p>" +
            "<p>床位总数：" +
            params[i].bed_num +
            "</p>" +
            "<p class='address'>详细地址：" +
            params[i].content +
            "</p>" +
            "</div>" +
            "</div>" +
            "</div>" +
            "</div>";
        }
        var point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);
        var infoWindow = new BMapGL.InfoWindow(sContent, opts); // 创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      },
      elderInfoWindow(params, e) {
        let _this = this;
        let p = e.target;
        let opts = {
          width: 450, // 信息窗口宽度
          title: params.title, // 信息窗口标题
          enableMessage: true, //设置允许信息窗发送短息
          enableCloseOnClick: false,
        };
        let sContent = "";
        for(let i = 0; i<params.length;i++){
          let avatar = params[i].profile
             ? params[i].profile
             : require("@/assets/images/avatar.jpg");
           let sex = params[i].sex == 1 ? "男" : "女";
           let type = "";
           if(this.type == '4') {
             type = params[i].type + "残疾"
           } else {
             type = this.dictDatas.olderType[params[i].type - 1];
           }
            sContent +=
            '<div class="el-card is-hover-shadow colorType0">' +
            '<div class="el-card__body el-card__body_2">' +
            '<div style="width: 100%;">' +
            '<div class="mapThumb vCenter olderavatar">' +
            '<img id="imgDom" src="' +
            avatar +
            '" alt="" />' +
            "</div>" +
            '<div class="mapText olderText">' +
            "<p>姓名：" +
            params[i].title +
            "</p>" +
            "<p>性别：" +
            sex +
            "</p>" +
            "<p>年龄：" +
            params[i].age +
            "</p>" +
            "<p>联系方式：" +
            params[i].mobile +
            "</p>" +
            "<p>身份证：" +
            params[i].id_card +
            "</p>" +
            "<p>老人类型：" +
            type +
            "</p>" +
            "<p class='address'>详细地址：" +
            params[i].content +
            "</p>" +
            "</div>" +
            "</div>" +
            "</div>" +
            "</div>";
        }


        let point = new BMapGL.Point(p.getPosition().lng, p.getPosition().lat);
        let infoWindow = new BMapGL.InfoWindow(sContent, opts); // 创建信息窗口对象
        this.map.openInfoWindow(infoWindow, point); //开启信息窗口
      },
      handlePoint(e) {
        this.map.clearOverlays();
        this.type = e.currentTarget.dataset.type;
        if (this.type === "1") {
          this.icon = require("@/assets/images/map-1.png");
          this.icon1 = require("@/assets/images/map-4.png");
          let params = {
            pid: 1,
            page_size: 10000,
          };
          this.getTableData(params);
        } else if (this.type === "2") {
          this.icon = require("@/assets/images/map-2.png");
          let params = {
            pid: 2,
            page_size: 10000,
          };
          this.getTableData(params);
        } else if (this.type === "3") {
          this.icon = require("@/assets/images/map-3.png");
          this.getdoorServeData();
        } else if (this.type === "4") {
          this.icon = require("@/assets/images/map-3.png");
          this.getCanjielderMap();
        }
      },
    },
  };
</script>
<style>
  .map-container .BMapGLLabel a {
    color: #333;
  }

  .map-container .BMapGL_bubble_content {
    padding-top: 10px;
  }

  .map-container .mapThumb {
    width: 100%;
    height: 220px;
    overflow: hidden;
  }

  .map-container .mapThumb img {
    max-width: 100%;
    height: auto;
  }

  .mapLine {
    margin: 10px 0;
    border-bottom: 1px solid#fff;
  }

  .mapText {
    display: grid;
    grid-template-columns: 50% 50%;
    line-height: 200%;
    color: #fff;
  }

  .mapText .address {
    grid-column-start: 1;
    grid-column-end: 3;
  }

  .BMapGL_center {
    background: none;
  }

  .BMapGL_bottom,
  .BMapGL_top {
    background: none;
  }

  .BMapGL_pop > div {
    color: #fff;
    background: #0b212c !important;
  }

  .BMap_bubble_pop {
    background: #0b212c !important;
  }

  .BMap_bubble_pop .el-card {
    background: #0b212c !important;
  }

  .BMap_bubble_pop .el-card .olderText {
    display: block;
  }

  .BMap_bubble_pop .el-card .el-card__body_2 {
    padding: 10px;
  }

  .BMap_bubble_pop .el-card .el-card__body_2 > div {
    display: flex;
  }

  .BMap_bubble_pop .el-card .mapText .address {
    width: 194px;
    /* overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap; */
  }

  .BMapGL_pop > div div {
    background: #0b212c !important;
  }

  .BMapGL_pop > div:nth-child(8) {
    display: none;
  }

  .map-container .olderavatar {
    flex: 0 0 200px !important;
    width: 200px !important;
    height: 200px !important;
    margin-right: 10px;
    overflow: hidden;
    border-radius: 5px;
  }

  .map-container .mapThumb.olderavatar img {
    width: 100%;
    height: 100%;
  }

  .BMapGL_pop .el-card__body_2 > div {
    display: flex;
  }

  .BMapGL_pop .olderText {
    display: block;
    flex: 1;
  }
</style>
<style lang="scss" scoped>
  .map-container {
    position: relative;
    padding: 0 !important;
    margin: 0 !important;

    .container {
      width: 100%;
      height: calc(100vh - 65px);
    }

    .map-menu {
      position: absolute;
      top: calc((100vh - 480px) / 2);
      left: 0;
      z-index: 999999;
      background: rgba($color: #2cc1bb, $alpha: 0.5);
      border-radius: 2px;

      .item {
        width: 80px;
        height: 80px;
        font-size: 12px;
        line-height: 80px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid #fff;

        &:last-child {
          border: none;
        }

        &.active {
          background: rgba($color: #2cc1bb, $alpha: 0.5);
        }
      }
    }
  }
</style>
